<template>
  <el-container>
      <el-main style="margin-top: -25px;">
          <el-row :gutter="25" style="padding: 10px;background-color: #fff;">

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="商品上传" name="first">
             
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                
                <el-form-item label="商品名称" prop="name" style="width:60%">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
        

                <el-form-item label="商品类别" prop="region">

                  <el-cascader
                  v-model="value"
                  :options="options"
                  @change="handleChange">
                </el-cascader>

                  <!-- <el-select v-model="ruleForm.region" placeholder="请选择商品类别">
                    <el-option label="当季水果" value="当季水果"></el-option>
                    <el-option label="进口水果" value="进口水果"></el-option>
                    <el-option label="热带水果" value="热带水果"></el-option>
                    <el-option label="特价水果" value="特价水果"></el-option>
                  </el-select> -->
                </el-form-item>

                <el-form-item label="商品数量" prop="quantity" style="width:20%">
                  <el-input v-model="ruleForm.quantity"></el-input>
                </el-form-item>

                <el-form-item label="商品价格" prop="price" style="width:20%">
                  <el-input v-model="ruleForm.price"></el-input>
                </el-form-item>
<!--              
                <el-form-item label="商品标签" prop="type" style="margin-top: -10px;">
                  <el-checkbox-group v-model="ruleForm.type">
                    <el-checkbox label="特卖" name="type"></el-checkbox>
                    <el-checkbox label="当日" name="type"></el-checkbox>
                    <el-checkbox label="新鲜" name="type"></el-checkbox>
                    <el-checkbox label="无坏果" name="type"></el-checkbox>
                    <el-checkbox label="品质保证" name="type"></el-checkbox>
                    <el-checkbox label="隔日达" name="type"></el-checkbox>
                    <el-checkbox label="绿色安心" name="type"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="销售方案" prop="resource" style="margin-top: -20px;">
                  <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="特卖销售"></el-radio>
                    <el-radio label="抢购销售"></el-radio>
                    <el-radio label="普通销售"></el-radio>
                    <el-radio label="限时销售"></el-radio>
                  </el-radio-group>

                </el-form-item> -->

                <el-form-item label="商品图片" >
                  <el-upload
                  action="http://localhost:8070/file/upload"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="handsuccess"
                  :data="pppss"
                  limit = 5
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>
              
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>

                </el-form-item>

                <el-form-item label="商品描述" prop="desc" style="width:60%">
                  <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                </el-form-item>
             
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="待上架" name="second" @click="second(1)">


              <template>
                <el-table
                  :data="tableData"
                  style="width: 100%">
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="商品名称">
                          <span>{{ props.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="商品 ID">
                          <span>{{ props.row.dityId }}</span>
                        </el-form-item>
                        <el-form-item label="商品标签">
                          <span>{{ props.row.type }}</span>
                        </el-form-item>
                        <el-form-item label="商品描述">
                          <span>{{ props.row.desc }}</span>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="商品图"
                    prop="id"
                    width="120">
                    <template slot-scope="props">
                    <el-image 
                    style="width: 60px; height: 60px;border-radius: 10px;"
                    :src="props.row.imgurl[0]"
                    :preview-src-list="srcList">
                  </el-image>
                </template>
                  </el-table-column>

                  <!-- <el-table-column
                  label="商品 ID"
                  prop="dityId"
                  width="290"
                  >
                </el-table-column> -->

                  <el-table-column
                    label="商品名称"
                    prop="name"
                    width="360"
                    >
                  </el-table-column>


                <el-table-column
                  label="商品数量"
                  prop="quantity"
                  width="130"
                  >
                </el-table-column>

              
                  <el-table-column
                  label="商品价格"
                  prop="price"
                  width="140"
                  >
                </el-table-column>
                <el-table-column
                label="商品上传时间"
                prop="uploadtime"
                width="250"
                >
              </el-table-column>
              <el-table-column 
              label="操作"
              width="260"
              
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">上架</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button
                    size="mini"
                    @click="handleyulan(scope.$index, scope.row)">预览</el-button>
                </template>

                
              </el-table-column>

                  
                </el-table>
              </template>

            </el-tab-pane>
            <el-tab-pane label="已上架" name="third">

              <template>
                <el-table
                  :data="tableData"
                  style="width: 100%">

                  <el-table-column
                    label="商品图"
                    prop="id"
                    width="150">
                    <template slot-scope="props">
                    <el-image 
                    style="width: 60px; height: 60px;border-radius: 10px;"
                    :src="props.row.imgurl[0]"
                    :preview-src-list="srcList">
                  </el-image>
                </template>
                  </el-table-column>


                  <el-table-column
                    label="商品名称"
                    prop="name"
                    width="360"
                    >
                  </el-table-column>



                <el-table-column
                  label="商品数量"
                  prop="quantity"
                  width="130"
                  >
                </el-table-column>

              
                  <el-table-column
                  label="商品价格"
                  prop="price"
                  width="140"
                  >
                </el-table-column>
                <el-table-column
                label="商品上传时间"
                prop="uploadtime"
                width="250"
                >
              </el-table-column>
              <el-table-column 
              label="操作"
              width="250"
              
              >
                <template slot-scope="scope">
                
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleOffhelf(scope.$index, scope.row)">下架</el-button>
                </template>
              </el-table-column>

                  
                </el-table>
              </template>


            </el-tab-pane>
            <el-tab-pane label="已下架" name="xthird">

              <template>
                <el-table
                  :data="tableData"
                  style="width: 100%">

                  <el-table-column
                    label="商品图"
                    prop="id"
                    width="120">
                    <template slot-scope="props">
                    <el-image 
                    style="width: 60px; height: 60px;border-radius: 10px;"
                    :src="props.row.imgurl[0]"
                    :preview-src-list="srcList">
                  </el-image>
                </template>
                  </el-table-column>


                  <el-table-column
                    label="商品名称"
                    prop="name"
                    width="360"
                    >
                  </el-table-column>


                <el-table-column
                  label="商品数量"
                  prop="quantity"
                  width="130"
                  >
                </el-table-column>

              
                  <el-table-column
                  label="商品价格"
                  prop="price"
                  width="140"
                  >
                </el-table-column>
                <el-table-column
                label="商品上传时间"
                prop="uploadtime"
                width="260"
                >
              </el-table-column>
              <el-table-column 
              label="操作"
              width="250"
              
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">重新上架</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>

                  
                </el-table>
              </template>



            </el-tab-pane>
          </el-tabs>

      </el-row>
        </el-main>
          <el-dialog
          title="商品详情预览"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose"
          :data="yulan" 
          
          >
          <el-row>
            <el-col :span="12" :data="tableData">
              <div class="sp_img_box">

                <div class="sp_img_max">
                  <el-image
                  :src="yulan.imgurl"
                  :fit="fit"
                  >
                </el-image>

                </div>

                <div class="sp_img_button">
                  <span>
                    <el-image
                    style="width: 72px; height: 72px"
                    :src="yulan.image2"
                    :fit="fit"
                    @mouseover="mouseOver(1)"
                    >
                  </el-image>
                  </span>
                  <span>
                    <el-image
                    style="width: 72px; height: 72px"
                    :src="yulan.image3"
                    :fit="fit"
                    @mouseover="mouseOver(2)"
                    
                    >
                  </el-image>
                  </span>
                  <span>
                    <el-image
                    style="width: 72px; height: 72px"
                    :src="yulan.image4"
                    :fit="fit"
                    @mouseover="mouseOver(3)"
                    >
                  </el-image>
                  </span>
                  <span>
                    <el-image
                    style="width: 72px; height: 72px"
                    :src="yulan.image5"
                    :fit="fit"
                    @mouseover="mouseOver(4)"
                    >
                  </el-image>
                  </span>
                </div>
              </div>
              <div class="grid-content bg-purple"></div></el-col>
            <el-col :span="12">

              <div class="grid-content bg-purple-light" style="margin-left: 10px;">

                <div class="sp_text_box" >
                  <div class="sp_title">
                    <el-tag type="danger">商城直营</el-tag>&nbsp;&nbsp;
                    <span class="sp_title_text">{{yulan.name}}</span>
                    <br><span class="sp_title_text_src" style="color: red;">{{yulan.desc}}</span>
                  </div>

                  <div class="sp_price" style="margin-top: 10px;background: #f3f3f3;">
                    <div class="sp_price_img" style="width:100%;">
                      <img src="https://img10.360buyimg.com/umm/jfs/t1/216749/1/8400/13802/61c047cdE55ffd9ae/a43f5cd161951cf0.png" alt="">
                    </div>
                    <div class="sp_price_text" style="padding: 10px;">
                      <span style="font-size: 14px;">特&nbsp;&nbsp;价：</span>
                      <span style="font-size: 20px;color: rgb(228, 89, 54);">{{yulan.price}}元</span><br><br>
                      <span style="font-size: 14px;">原&nbsp;&nbsp;价：</span>
                      <span style="font-size: 16px;color: rgb(119, 114, 113);text-decoration:line-through;">{{yulan.price}}元</span>
                    </div>
                  </div>

                  <div class="sp_price_t" style="margin-top: 10px;">
                    <el-tag closable>{{yulan.region}}</el-tag>&nbsp;&nbsp;
                    <el-tag closable>{{yulan.resource}}</el-tag>&nbsp;&nbsp;
                    <el-tag closable>默认标签</el-tag>&nbsp;&nbsp;
                  </div>

                  <div class="sp_price_y" style="margin-top: 15px;">
                    <el-input-number v-model="num" :step="1" label="描述文字"></el-input-number>
                    <span style="margin-left: 20px;font-size: 15px;">总价:</span> <span  style="font-size: 18px;">25.55</span>
                  </div>

                  <div class="sp_price_s" style="margin-top: 20px;">
                    <el-button type="primary" size="medium" plain style="width:150px;">加入购物车</el-button>
                    <el-button type="success" size="medium" plain style="margin-left: 10px;width:150px;">立即购买</el-button>
                  </div>
                </div>
              </div>                    
            </el-col>
          </el-row>


          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>

      </el-container>


      
</template>
<script>
export default {

data() {
    return {
      dialogVisible: true,
      activeName: 'first',
      ruleForm: {
        name: '',
        region: '',
        desc: '',
        quantity:'',
        type:'',
        price:'',
        resource:'',
        imgurl:[],
         num: 1,

    },

    options: [{
        value: '休闲鞋',
        label: '休闲鞋',
        children: [{
          value: '高帮鞋',
          label: '高帮鞋',}
          ,{
          value: '中帮鞋',
          label: '中帮鞋', 
         }  ,{
          value: '底帮鞋',
          label: '底帮鞋', 
         }
      ]
      }, {
        value: '跑步鞋',
        label: '跑步鞋',
        children: [{
          value: '蝰蛇系列',
          label: '蝰蛇系列'
        }, {
          value: '毒蛇系列',
          label: '毒蛇系列'
        }, {
          value: '白蛇系列',
          label: '白蛇系列'
        }
      ]
      },
      {
        value: '篮球鞋',
        label: '篮球鞋',
        children: [{
          value: '毒液系列',
          label: '毒液系列'
        }, {
          value: '飞翔系列',
          label: '飞翔系列'
        }, {
          value: '赛场系列',
          label: '赛场系列'
        }
      ]
      }],
      yuimg:[],
      input: '',
      dialogImageUrl: '',
      dialogVisible: false,
      tableData: [],
      yulan:[],
      isT:0,
      id:0,
      sta:0,
      st:0,
    }

  },
  mounted:function(){
   this.loadexecution();
  },

  methods: {

    mouseOver(i)
    {

      if(i==1) {
          this.yulan.imgurl = this.yulan.image2
      }else if(i == 2) {
        this.yulan.imgurl = this.yulan.image3
      }else if(i==3){
        this.yulan.imgurl = this.yulan.image4
      }else{
        this.yulan.imgurl = this.yulan.image5
      }
    
    },
    

    success(msg)
    {
      this.$message({
          type: 'success',
          message: msg,
        });
    },

  cancel(msg){
    
    this.$message({
          type: 'info',
          message: msg
        });   
  }, 

  /**商品上架**/
  async handleEdit(index, row)
  {

    const {data:res} = await this.$http.post('person/UpCommodityEntity',this.$qs.stringify({'id':row.id}));
    if(res.success==true){
     this.success("上架成功!")
     this.tableData.splice(index, 1)
        }else{
    
       }
  },

  /**商品下架**/
  async  handleOffhelf(index, row){

    const {data:res} = await this.$http.post('person/UpCommodityEntitysta',this.$qs.stringify({'id':row.id}));
    if(res.success==true){
     this.success("下架成功!")
     this.tableData.splice(index, 1)
        }else{
       }
  },


  handleChange(value) {
      this.ruleForm.type = '',
      this.ruleForm.region = '',
      this.ruleForm.type = this.ruleForm.region+value[0];
      this.ruleForm.region = this.ruleForm.region+value[1];
      
  },


  //商品预览
  handleyulan(index, row){
    this. dialogVisible = true;
    this.yulan  = JSON.parse(JSON.stringify(row));
    console.log(this.yulan)
  },


     //加载页面时查询数据
 async loadexecution(){

        const {data:res} = await this.$http.post('person/getEntitySta',this.$qs.stringify({'sta':this.sta,'st':this.st}));
        if(res.success==true){
          this.tableData = res.result;

          for(var i=0;i<this.tableData.length;i++)
          {
            var img =  this.tableData[i].imgurl.replace("[",""); 
                img =  img.replace("]",""); 
                img =  img.replace(/\"/g, "");
            this.tableData[i].imgurl =img.split(",");
          }
        
          console.log(this.tableData)
        }else{
          this.tableData = res.result;
       }
  },

  confirm()
  {
    this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.delete()
      
      }).catch(() => {
      
        this.cancel('已取消删除!')
        this.isT = 0

      });

  },
  

  //删除数据
  async delete(index, row)
  {
    const {data:res} = await this.$http.post('person/deletePerson',this.$qs.stringify({'id':row.id}));
  if(res.success==true){
     this.success("删除成功!")
     this.tableData.splice(index, 1)
  }else{
    this.cancel("删除失败!商品不存在!")
  }
  },


  resetForm()
  {

     this.ruleForm = []
  },


   handleDelete(index, row) {

    this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.delete(index, row)
      
      }).catch(() => {
      
        this.cancel('已取消删除!')
        this.isT = 0

      });

    },


    handleClick(index){

      console.log(index)
      console.log(index.name == 'third')
      if(index.name  == 'second')
      {
        this.sta = 0;
        this.st = 0;
        this.loadexecution();
      }else if(index.name  == 'third'){
        this.sta = 1;
        this.st = 0;
        this.loadexecution();
      }else if(index.name = 'xthird')
      {
        this.sta = 1;
        this.st = 1;
        this.loadexecution();
      }else{

      }
    },


    //商品上传
    async submitForm(rules)
    {
     

      let data =this.$qs.stringify({
      tab : JSON.stringify(this.ruleForm)
       });
     const {data:res} = await this.$http.post('person/setperson',data);
      if(res.success==true){
        this.success("恭喜您,上传成功!")
      }else{
        this.cancel("抱歉删除失败，请重新上传!");
       }
    },

    handleRemove(file, fileList) {

      console.log(file, fileList);


    },

    handsuccess(file)
    {
      console.log(file)
      this.ruleForm.imgurl.push(file.result)
    },

    handlePictureCardPreview(file) {
      console.log(file)
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    uploadFile(file,fileList)
    {
      console.log(fileList)
      console.log(fifile.resultle)
   
    }

 }
}

</script>
<style>

.sp_price_img img
{
 width:100%;
 height:20px;
}


.sp_title_text
{
  font: 700 16px Arial,"microsoft yahei";
  color: #666;
}

.sp_img_button
{
width:400px;
cursor:pointer

}

.sp_img_button span img
{
width:70px;
height:70px;
border-radius: 2px;
}

.sp_img_button span
{
float: left;
padding:5px;
margin-top: 10px;
cursor:pointer

}

.sp_img_button span:hover{
border:2px solid rgb(32, 175, 144);

}

.sp_img_max
{
  width:300px;
  height:300px;
  cursor:pointer;
  margin-left: 5px;
}

.sp_img_max img
{
  width:300px;
  height:300px;
  border-radius: 2px;
}


.per_user_box
{
  border:1px solid rgb(231, 226, 226);
}
.el-row {
  margin-bottom: 10px;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #fff;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #ffff;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #fff;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}


</style>